<template>
  <div class="miningCell items-center">
    <!-- 头像 -->
    <ImgNuxt
      class="miningCell-avatar"
      :src="item.avatar || file.avatarDefault"
      :placeholder="file.avatarDefault"
      isHttp
    />
    <!-- 信息 -->
    <div class="miningCell-info items-center">
      <!-- 昵称 -->
      <div
        class="miningCell-info-nick"
        style="min-width: 28px; text-align: center"
      >
        {{ item.nickname ? item.nickname.substring(0, 11) : "--" }}
        <span style="margin-left: -4px">
          {{ item.nickname && item.nickname.length > 11 ? "..." : "" }}
        </span>
      </div>
      <!-- 获得 -->
      <div class="miningCell-info-text">
        {{ $t("mvp.mining.text13") }}
      </div>
      <!-- BDC -->
      <div class="miningCell-info-bdc">{{ item.acquireAmount }} BDC</div>
      <!-- 符号 -->
      <div class="miningCell-info-str items-center">
        {{ item.miningtext || item.id }}
      </div>
    </div>
  </div>
</template>
<script setup name="miningCell">
const props = defineProps({
  item: {
    type: Object,
    default: [],
  },
});

const file = getOssFileUrl({
  avatarDefault: "/image/avatar-default.png",
});

// const { t } = useI18n();

// onMounted(() => {});
</script>
<style lang="scss" scoped>
.miningCell {
  border-radius: 100px;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(12px);
  padding: 2 * 2px 0;
  height: 18 * 2px;

  &-avatar {
    min-width: 14 * 2px !important;
    max-width: 14 * 2px !important;
    height: 14 * 2px;
    border-radius: 100px;
    overflow: hidden;
    border: 1px solid #4aa1ff;
    margin: 0 9 * 2px;
  }

  &-info {
    // margin-right: 6 * 2px;
    &-nick {
      color: #fff;
      font-size: 11 * 2px;
      text-wrap: nowrap;
      white-space: nowrap;
      margin-right: 9 * 2px;
    }
    &-text {
      color: #fff;
      font-size: 11 * 2px;
      text-wrap: nowrap;
      white-space: nowrap;
      margin-right: 9 * 2px;
    }

    &-bdc {
      margin-right: 9 * 2px;
      color: #007bff;
      font-size: 11 * 2px;
      font-weight: 590;
    }

    &-str {
      min-width: 38 * 2px;
      font-weight: 700;
      color: red;
    }
  }
}
</style>
